<template>
  <nav class="navbar navbar-expand navbar-dark bg-dark osahan-nav-top p-0">
    <div class="container">
      <!-- logo内容 -->
      <a class="navbar-brand mr-2" href="/">
        <img src="@/assets/img/logo.png" height="40px" alt="" />
      </a>
      <ul class="navbar-nav ml-auto d-flex align-items-center">
        <!-- 右边内容 -->
        <li class="nav-item mydidden">
          <router-link to="/" class="nav-link" href="" style="overflow: hidden">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuye"></use>
            </svg>
            <span style="color: white">主页</span>
          </router-link>
        </li>
        <li class="nav-item mydidden">
          <router-link class="nav-link" to="activity"
          ><svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-huodongx"></use>
           </svg>
            <span style="color: white">活动</span>
          </router-link>
        </li>
        <li class="nav-item mydidden">
          <router-link to="photography" class="nav-link" href=""
          ><svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-xiangji"></use>
           </svg>
            <span style="color: white">摄影</span>
          </router-link>
        </li>
        <li class="nav-item mydidden">
          <router-link to="copywriting" class="nav-link" href="">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bianji"></use>
            </svg>
            <span style="color: white">文案</span></router-link
          >
        </li>
        <li class="nav-item dropdown mr-2">
          <a class="nav-link pr-0">
            <span class="d-none d-lg-inline" @click="showChatFun"
            ><i class="el-icon-chat-dot-round mr-1"></i>聊天</span
            >
          </a>
          <!-- 好友下拉列表内容 -->
        </li>
        <li class="nav-item dropdown no-arrow ml-1" v-if="noLogin">
          <router-link to="login">
            <span>登录</span> </router-link
          >|
          <router-link to="register">
            <span>注册</span> </router-link
          >|
        </li>
        <li
          v-if="!noLogin"
          class="nav-item dropdown no-arrow ml-1 osahan-profile-dropdown"
        >
          <a
            class="nav-link dropdown-toggle pr-0"
            href="#"
            role="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <img
              class="img-profile rounded-circle"
              :src="$store.state.userInfo.userHeader"
            />
          </a>
          <!-- Dropdown - User Information -->
          <!-- 点击头像 用户下拉信息 -->
          <div class="dropdown-menu dropdown-menu-right shadow-sm">
            <div class="p-3 d-flex align-items-center">
              <div class="dropdown-list-image mr-3">
                <img
                  class="rounded-circle"
                  :src="$store.state.userInfo.userHeader"
                  alt=""
                />
                <div class="status-indicator bg-success"></div>
              </div>

              <div class="font-weight-bold">
                <div class="text-truncate">
                  {{ $store.state.userInfo.name }}
                </div>
                <div class="small text-gray-500">
                  {{ $store.state.userInfo.occupation }}
                </div>
                <div class="small text-gray-500">
                  {{ $store.state.userInfo.sex }}
                </div>
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" @click="goTo('/profile')" >
              <i class="el-icon-user mr-1"></i> 个人中心
            </a >
            <a class="dropdown-item" @click="logout">
              <i class="el-icon-position mr-1"></i> 退出登录
            </a>
          </div>
        </li>
        <!-- 联系后面的下拉列表 -->
        <li class="nav-item dropdown no-arrow mx-1 osahan-list-dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            role="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaoxi"></use>
            </svg>
            <span
              class="badge badge-danger badge-counter"
              v-if="messageList.length != 0"
            >{{ messageList.length }}</span
            >
          </a>
          <div class="dropdown-list dropdown-menu dropdown-menu-right">
            <h6 class="dropdown-header">消息中心</h6>
            <div v-if="messageList.length != 0">
              <div
                class="dropdown-item d-flex align-items-center"
                href="#"
                v-for="(item, index) in messageList"
                :key="index"
                @click="dealwithMessage(item.user_id, index)"
              >
                <div class="dropdown-list-image mr-3">
                  <img class="rounded-circle" :src="item.user_header" alt="" />
                </div>
                <div class="font-weight-bold overflow-hidden">
                  <div class="text-truncate">
                    {{ item.user_name }} 请求添加好友！
                  </div>
                  <div class="small text-gray-500">
                    {{ $moment(item.create_time).format("lll") }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="zwxx">暂无消息</div>
            <div class="dropdown-item text-center small text-gray-500" href="#">
              关闭
            </div>
          </div>
        </li>
        <li class="nav-item dropdown mr-2">
          <a
            class="nav-link dropdown-toggle pr-0"
            href="#"
            role="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <span class="d-none d-lg-inline">更多...</span>
          </a>
          <div class="dropdown-menu dropdown-menu-right shadow-sm">
            <div class="m-1">征集意见，请发邮箱至</div>
            <div class="m-1">1031735010@qq.com</div>
          </div>
        </li>
      </ul>
    </div>
    <Chat ref="chat" v-if="showChat" @hiddenChat="hiddenChat" id="chat"></Chat>
  </nav>
</template>

<script>
import Chat from "@/components/chat.vue";

export default {
  name: "Header",
  data() {
    return {
      getMessageStore: this.newStore(),
      dealwithStore: this.newStore(),
      userinfo: this.$store.state.userInfo,
      showChat: false,
      noLogin:
        window.localStorage.getItem("userinfo") === null
        || window.localStorage.getItem("userinfo") === "",
      messageList: "",
    };
  },

  components: {
    Chat,
  },
  created() {
    this.getMessage();
  },
  methods: {
    getMessage() {
      this.spost(this.getMessageStore, "/getMessage", {
        userId: this.$store.state.userInfo.userid,
      }).then((res) => {
        this.messageList = res.d.messageList;
      });
    },
    hiddenChat() {
      this.showChat = false;
    },
    showChatFun() {
      if (window.localStorage.getItem("userinfo")) {
        this.showChat = true;
      } else {
        this.$message.warning("你还没有登录，请登录后重试");
      }
    },
    dealwithMessage(id, index) {
      this.$confirm("是否同意添加好友?", "提示", {
        confirmButtonText: "同意",
        cancelButtonText: "不同意",
        type: "warning",
        closeOnClickModal: false,
        lockScroll: false,
        distinguishCancelAndClose: true,
      })
        .then(() => {
          this.spost(this.dealwithStore, "/dealwithNewFriend", {
            status: "1",
            userId: id,
            friendId: this.$store.state.userInfo.userid,
          }).then(() => {
            this.$message({
              type: "success",
              message: "你已经同意好友添加！",
            });
            this.messageList.splice(index, 1);
          });
        })
        .catch((action) => {
          if (action === "cancel") {
            this.spost(this.dealwithStore, "/dealwithNewFriend", {
              status: "2",
              userId: id,
              friendId: this.$store.state.userInfo.userid,
            }).then(() => {
              this.$message({
                type: "warn",
                message: "您已拒绝好友申请",
              });
            });
          } else {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          }
        });
    },
    goTo(path, param) {
      this.$router.push({
        path,
        query: { info: param },
      });
    },
    logout() {
      localStorage.setItem("token", "");
      localStorage.setItem("userinfo", "");
      this.$store.commit("userInfoChange", {});
      this.$message.success("退出成功！");
      this.$router.push("/login");
    },
    friendsFun() {
      this.showFriends = true;
    },
  },
};
</script>

<style scoped lang="scss">
@media only screen and (max-width: 500px) {
  .mydidden {
    display: none;
  }
}
i {
  font-size: 20px;
}
// .mydidden{
//   background: red;
// }
svg {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
.zwxx {
  width: 100%;
  text-align: center;
  margin: 15px 0;
}
</style>
